<template>
  <div class="detail_module_panel other_info">
    <h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">
      {{$t('tel.hisTelInfo')}}
    </h3>
    <div class="panel_info_content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="left" label="记录时间" prop="createTime" :label="$t('csDetails.recordTime')" min-width="140">
          <template slot-scope="scope">{{ scope.row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column align="left" label="内部订单号" prop="orderNid" :label="$t('csDetails.innerOrderNum')" min-width="140"></el-table-column>
        <el-table-column align="left" label="结果" prop="verifyResult" :label="$t('tel.result')" min-width="80">
          <template slot-scope="scope">{{ scope.row.verifyResult | switchResult }}</template>
        </el-table-column>
        <el-table-column align="left" :show-overflow-tooltip="true" :label="$t('common.reason')" min-width="200">
          <template slot-scope="scope">
            <span v-for="item in scope.row.rciList">{{ item.reasonCode + '-' + item.resonCodeReturn + ';' + ' ' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" :show-overflow-tooltip="true" label="操作人员" prop="operPeopleName" :label="$t('tel.operationStaff')" min-width="200">
        </el-table-column>
        <el-table-column align="left" :show-overflow-tooltip="true" :label="$t('common.remark')" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <!--新增SPC码-->
        <el-table-column align="left" label="SPC码" prop="spcCode" :label="$t('xsDetails.spcCode')" min-width="120"></el-table-column>
      </el-table>
    </div>
    <div class="telPagination">
      <el-pagination @current-change="paginationChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.recordsTotal"></el-pagination>
    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/pagination';
  import mixin from '@/service/mixin';
  import storage from '@/libs/storage';
  import EventBus from '@/libs/event-bus';
  import { eventConf } from '@/config/';

  let that = null;
  export default {
    name: 'hisTelRecord',
    components: {
      Pagination
    },
    mixins: [mixin],
    props: {
      updateType: {
        type: String
      }
    },
    data() {
      return {
        userId: '',
        tableData: [],
        currentPage: 1,
        pagination: {
          recordsTotal: 0,
          currentPage: 1,
          pageSize: 10,
        },
      };
    },
    watch: {
      updateType(val) {
        if (val === 'hisTelRecord') {
          this.page.currentPage = 1;
          this.getTableData();
        }
      }
    },
    methods: {
      getTableData() {
        const params = {
          userId: this.userId,
          language: storage.getLocal('language'),
          page: {
            pageNo: this.pagination.currentPage,
            pageSize: this.pagination.pageSize
          },
        };
        this.$api.tel.queryVerifyRecords(params).then((res) => {
          const { status, data, error } = res;
          if (status === '1' && error === '00000000') {
            this.tableData = data.data || [];
            this.pagination.recordsTotal = data.pageCount;
            this.tableMaxHeight = window.document.body.clientHeight - 300;
          }
        });
      },
      paginationChange() {
        this.getTableData();
      },
      listenEvent() {
        EventBus.$on(eventConf.UPDATATELRECORD, () => {
          this.getTableData({ currentPage: 1 });
        });
      }
    },
    filters: {
      // 用户类型
      switchResult(type) {
        switch (+type) {
          case 0:
            return that.$t('tel.willFollow');
          case 1:
            return that.$t('xsDetails.pass');
          case 2:
            return that.$t('xsDetails.refuse');
          default:
            return '';
        }
      },
    },
    created() {
      const params = this.$route.params;
      this.userId = params.id;
      that = this;
      if (this.userId) {
        this.getTableData();
      }
      this.listenEvent();
    }
  };
</script>

<style lang="scss" scoped>
  .popOver {
    word-break: break-all;
  }
  .video{
    background-color: rgba(0, 0, 0, 0.4)!important;
  }
  .video_icon{
    display: block;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px 32px;
    background-image: url("~@/assets/img/icon_video.png");
  }
  .check_loan_history{
    margin-left: 15px;
  }
</style>
